<template>
  <view class="vision">
    <view class="container">
      <view class="box">
        <text></text>
        <text class="text">温馨提示:选项都是默认位"否",存在该症状请点击"是"</text>
        <scroll-view class="scroll">
          <view class="question-container" v-for="(question, index) in state.questions" :key="index"> 
            <text class="question">{{ index+1 }}.{{'是否具有'+ question.content }}</text>
            <view class="border"></view>  
            <radio-group class="radio-group" @change="handleRadioChange(index, question,$event.target.value)">  
              <label class="radio-label" v-for="(option,index_option) in options" :key="option.value">  
                <radio :value="option.value" :checked="index_option === state.current"/>
                <text>{{ option.label}}</text>
              </label>  
            </radio-group>  
          </view>
          <view class="border1"></view>
        </scroll-view>
      </view>
    </view>
    <view class="foot_box">
      <view class="foot-container">
        <text class="foot1" @tap="back">上一步</text>
        <text class="foot2">7/8</text>
        <text class="foot3" @tap="next">下一步</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref,reactive,computed} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {getUnderlyingDiseaseListApi,postUnderlyingDiseaseApi} from '@/apis/underlyingDisease/underlyingDisease'
import { useMarkStore } from '@/stores/modules/mark';
const useMark = useMarkStore()
const back = ()=>{
 uni.navigateBack()
}
const state = reactive({
  questions:[],
  current:1
})
const options = reactive([
  {value:'yes',label:'是'},
  {value:'no',label:'否'},
])
const getDiseaseList = async ()=>{
  const res = await getUnderlyingDiseaseListApi()
  state.questions = res.data
  console.log('我是疾病列表',state.questions1)
  if(res.code===200)
  {
    setSelected()
  }

 /*  for(let i=0;i<state.questions.length;i++)
  {
    state.questions[i].value = i
    state.questions[i].result = 0
    state.questions[i].checked = false
  }
  state.questions1=state.questions
  console.log('我是改变后的疾病列表1：',state.questions) */
}
const checkboxChange = (e)=>{
  const totalValues = e.detail.value
  console.log('我i是change事件的',totalValues)
  for(let i=0;i<state.questions.length;i++)
  {
    let isChecked = totalValues.includes(String(state.questions[i].value))
    if(isChecked)
    {
      state.questions[i].result=1
    }else{
      state.questions[i].result=0
    }
  }
}
const handleRadioChange = (index,question,targetValue)=>{//radio框的值改变触发回调函数
  if(targetValue==='yes')
  {
    selected[index].result=1
  }
  else{
    selected[index].result=0
  }
}
/* const uuid = ref(0)
const uuid1 = ref(0)
const uuid2 = ref(0)
const getUuid =async ()=>{
 const res = await wx.getRandomValues({length: 12 })
 uuid.value = wx.arrayBufferToBase64(res.randomValues)
 const res1 = await wx.getRandomValues({length: 12 })
 uuid1.value = wx.arrayBufferToBase64(res.randomValues)
 uuid2.value=uuid1.value+uuid.value
 console.log('uuid:',uuid2.value)
} */
const selected = []
const setSelected = ()=>{
  for(let i=0;i<state.questions?.length;i++)
{
  selected.push({mark:useMark.mark,tsBaseUnderlyingDiseaseId:state.questions[i]?.id,result:0})
}
console.log('我是seleted',selected) 
}
const next =async ()=>{//提交
  /* for(let i=0;i<state.questions.length;i++)
  {
    selected.push({mark:uuid2.value,tsBaseUnderlyingDiseaseId:state.questions[i].id,result:state.questions[i].result})
  } */
  console.log('我是提交的问题：',selected)
  const res = await postUnderlyingDiseaseApi(selected)
  console.log(res.msg)
  console.log(res.code)
  uni.navigateTo({ url: '/pages/fallRiskList/components/symptom/symptom'})
}
onLoad(async()=>{
  await getDiseaseList()
})
</script>

<style lang="scss">
page {
 background-color: rgb(10,127,255);
}
.vision{
 height:100vh;
 position: relative;
 .container{
  height: 100vh;
  margin: 30rpx;
  background-color: #fff;
  border-radius: 15rpx;
  .box{
    border-radius: 20rpx;
   background-color: #fff;
   .scroll{
  margin-top: 15rpx;
.question-container {  
  margin-bottom: 40rpx;/* 每个问题之间的间距 */  
.question {   
  margin-bottom: 40rpx; 
  margin-left: 50rpx;
}  
.border{
  height: 3rpx;
  width: 600rpx;
  background-color: #eee;
  margin-top: 20rpx;
  margin-left: 50rpx;
  margin-bottom: 15rpx;
}
.radio-group {   
  margin-left: 50rpx;
.radio-label {   
  padding-top: 30rpx; 
  padding-right: 200rpx; 
}  
}
}
.border1{
  height: 150rpx;
  background-color: #fff;
}
}
   .text{
 font-size: 26rpx;
 color: black;
 font-weight: bold;
 margin-left: 35rpx;
 padding-top: 50rpx;
}
}
 }
 .foot_box{
    position:fixed;
    bottom: 2rpx;
    height: 100rpx;
    width: 100%;
    background-color: #fff;
    .foot-container{
      margin: 15rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .foot1, .foot2, .foot3{
            font-size: 35rpx;
            color: black;
          }
      .foot2{
        text-align: center;
      }
    }
   
  }
}

</style>